<template>
  <div>
    <div class="pbg">
      <p class="text">运动</p>
    </div>
    <!-- 日历部分 -->
    <div class="calendar">
      <div class="center">
        <div class="c-title">
          <div class="left">
            <img src="../../assets/img/18-29-37.png" alt="" />
          </div>
          <div class="right" @click="goMycourse">
            <span>我的课程</span>
            <img src="../../assets/img/18-29-43.png" alt="" />
          </div>
        </div>
        <!-- tab组件 -->
        <van-tabs color="#000" v-model="active">
          <van-tab v-for="index in 6" :key="index">
            <template #title>
              <div>
                <div class="line1">{{ week[index - 1] }}</div>
                <div class="line2">{{ month[index - 1] }}.{{ days[index - 1] }}</div>
              </div>
            </template>
            <!-- 内容 -->
            <div class="ca-contain" @click="showPopup">
              <p class="text-1">每一滴汗水,都值得被记录~</p>
              <div class="or-course">
                <img src="../../assets/img/18-29-52.png" alt="" />
                <span>约课</span>
              </div>
            </div>
            <!-- 底部弹出 -->
            <van-popup v-model="show" position="bottom" :round="true" :safe-area-inset-bottom="true">
              <div class="ch-course">
                <p class="text-2">选择课程类型</p>
                <!-- 页面导航 -->

                <!-- 团体课页面跳转 -->
                <van-cell is-link to="teamcourse">
                  <template #title>
                    <img src="../../assets/img/icon-tuan.png" alt="" class="my-icon" />
                    <span class="custom-title">团体课</span>
                  </template>
                </van-cell>

                <!-- 私人页面跳转 -->
                <van-cell is-link to="#">
                  <template #title>
                    <img src="../../assets/img/icon-si.png" alt="" class="my-icon" />
                    <span class="custom-title">私人教练</span>
                  </template>
                </van-cell>

                <!-- 训练营课程跳转  -->
                <van-cell is-link to="#">
                  <template #title>
                    <img src="../../assets/img/icon-xun.png" alt="" class="my-icon" />
                    <span class="custom-title">训练营</span>
                  </template>
                </van-cell>
              </div>
            </van-popup>
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Sport',

  data() {
    return {
      active: 1,
      show: false,
      week: [],
      month: [],
      days: []
    }
  },

  // body背景色灰色
  beforeCreate() {
    document.querySelector('body').setAttribute('style', 'background-color:#f5f5f5;')
  },
  beforeDestroy() {
    document.querySelector('body').removeAttribute('style')
  },

  mounted() {
    this.getDate()
  },

  methods: {
    getDate() {
      // 得到今天的日期
      var today = new Date()
      var a = 1000 * 60 * 60 * 24
      var today0 = new Date(+today - a)
      var today1 = new Date(+today + a)
      var today2 = new Date(+today + a * 2)
      var today3 = new Date(+today + a * 3)
      var today4 = new Date(+today + a * 4)
      var Year = today.getFullYear()
      var Month = today.getMonth() + 1
      // 得到当前年今天是周几
      var Day = today.getDay()
      var weekday = ['周一', '周二', '周三', '周四', '周五', '周六', '周日', '周一', '周二', '周三']
      // var myweek = weekday[Day]
      this.week = ['昨天', '今天', '明天', weekday[Day + 1], weekday[Day + 2], weekday[Day + 3]]
      var mydate0 = today0.getDate()
      var mydate = today.getDate()
      var mydate1 = today1.getDate()
      var mydate2 = today2.getDate()
      var mydate3 = today3.getDate()
      var mydate4 = today4.getDate()
      var mymonth0 = today0.getMonth() + 1
      var mymonth = today.getMonth() + 1
      var mymonth1 = today1.getMonth() + 1
      var mymonth2 = today2.getMonth() + 1
      var mymonth3 = today3.getMonth() + 1
      var mymonth4 = today4.getMonth() + 1
      // console.log(new Date(+today+a));
      this.days = [mydate0, mydate, mydate1, mydate2, mydate3, mydate4]
      this.month = [mymonth0, mymonth, mymonth1, mymonth2, mymonth3, mymonth4]
    },
    // 底部弹出
    showPopup() {
      this.show = true
    },
    // 我的课程页面跳转
    goMycourse() {
      this.$router.push('/mycourse')
    },
    // 团体课页面跳转
    goTeamcourse() {
      this.$router.push('/teamcourse')
    }
  }
}
</script>

<style lang="less" scoped>
.pbg {
  position: fixed;
  bottom: 66%;
  right: -83%;
  width: 1000px;
  height: 1000px;
  background-color: rgb(83, 78, 99);
  border-radius: 50%;
}

.text {
  position: fixed;
  top: 0;
  left: 0;
  font-size: 28px;
  color: white;
  margin: 0;
  padding-top: 30px;
  margin-left: 16px;
}
.calendar {
  width: 343px;
  height: 218px;
  background-color: white;
  border-radius: 10px;
  position: absolute;
  top: 92px;
  left: 16px;
  box-shadow: 1px 1px 1px 1px rgb(241, 241, 241);
  padding-top: 20px;
  .center {
    .c-title {
      position: relative;
      padding-bottom: 8px;
      width: 90%;
      margin: 0 auto;
      .left {
        img {
          width: 74px;
        }
      }
      .right {
        span {
          color: rgb(174, 174, 174);
          font-size: 12px;
          position: absolute;
          top: 0px;
          right: 18px;
        }
        img {
          width: 14px;
          position: absolute;
          top: 0px;
          right: 0;
        }
      }
    }
    .line1 {
      color: rgb(174, 174, 174);
      font-size: 14px;
      text-align: center;
    }
    .line2 {
      color: rgb(174, 174, 174);
      font-size: 10px;
      text-align: center;
    }
    .ca-contain {
      text-align: center;
      .text-1 {
        font-size: 14px;
        color: rgb(102, 102, 102);
        margin-top: 30px;
      }
      .or-course {
        width: 152px;
        height: 36px;
        background-color: rgb(255, 246, 244);
        margin: auto;
        margin-top: 30px;
        position: relative;
        img {
          width: 18px;
          position: absolute;
          top: 9px;
          left: 55px;
        }
        span {
          font-size: 14px;
          color: rgb(255, 96, 64);
          position: absolute;
          top: 8px;
          left: 76px;
        }
      }
    }
  }
}

.overlay-style {
  background-color: rgb(209, 164, 164);
}

.ch-course {
  height: 28%;
  .text-2 {
    font-size: 18px;
    color: rgb(51, 51, 51);
    text-align: center;
    margin-top: 15px;
  }
  .van-cell {
    width: 100%;
    // margin-left: 35px;
    line-height: 35px;
    position: relative;
    padding-left: 40px;
    box-sizing: border-box;
  }
  .van-cell::after {
    border-bottom: 0;
  }
  .my-icon {
    width: 20px;
    position: absolute;
    top: 17px;
    left: 13px;
  }
}

/deep/.van-tabs__wrap--scrollable {
  .van-tab--active {
    .van-tab__text {
      div {
        color: rgb(0, 0, 0);
      }
    }
  }
}
</style>
